<template>
    <div class="home-recommond">
        <h3 class="more">推荐歌单</h3>
        
        <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
            <li v-for="(item,i) in listData" :key="i"
            @click="selectItem(item)">
                <div class="cover">
                    <van-image :src="item.picUrl" radius="1rem"/>
                    <span>{{ item.playCount | numFilter(1)}}万</span>
                </div>
                <span>{{ item.name }}</span>
            </li>
        </ul>
    </div>
    </div>
</template>
<script>
// import BScroll from "better-scroll";
export default {
    data(){
        return{
            listData:[]
        }
    },
    created(){
        this.getSongListData()
    },
    methods:{
        getSongListData(){
            this.$request('get','/personalized')
            .then(res=>{
                console.log(res)
                if(res.code==200){
                    this.listData=res.result;
                }
                // this.betterScrollHorizontal(this.listData.length,10);
            });
        },
            selectItem(item){
            const id = item.id;//获取到歌单的id
            console.log("number"+id);
            //1.命名的路由name，并加上参数，让路由建立url
            // this.$router.push({
            //     name:"singlist",
            //     params:{
            //         id:id //等同于id
            //     }
            // })
            //2.通过path手动建立url
            this.$router.push({path:`/songlist/${id}`})
        },
    //     betterScrollHorizontal(num,itemWidth){
    //         this.$refs.content.style.width=num * itemWidth + "rem";
    //             this.$nextTick(() => {
    //                 this.scroll =new BScroll(this.$refs.wrapper, {
    //                     scrollY:false,
    //                     scrollX: true,
    //                     startX: 0,
    //                 });
    //             });
          
    // },
},
    filters:{
        numFilter(value,num){
            return parseFloat(value/10000).toFixed(num)
        }
    }
}
</script>
<style scoped>
.more{
    float: center;
}
.box{
      float: right;
      border: 1px solid #54493b;
     
        font-size: 15px;
       
       border-radius: 20px;
        width: 3.5rem;
        display:inline-flex;
}
.cover > span {
        position: absolute;
        right: 0.2rem;
        top: 0.4rem;
        background-color:#a6a8a0;
        color: white;
        font-size: 14px;
        border-radius: 1rem;
        width: 5rem;
        display: inline-block;
    }
    .cover {
        position: relative;
    }
    .wrapper {
        width: 100%;
        overflow: hidden;
    }
    ul.content li {
        width: 10rem;
        display: inline-block;
        vertical-align: top;
    }
    ul.content li * {
        margin: 0.1rem;
    }
    ul.content li > span {
        font-size: 0.8rem;
        color: #54493b;
    }
</style>